/**
 * 新建编辑地址 
 */ 
<template>
  <view class="edit-reate-address">
    <view class="address-tips">
      地址信息仅用于下单，隐私信息将完全保密
    </view>
    <view class="edit-reate-address--box">
      <u--textarea class="address-textarea" v-model="addressInfo" placeholder="请粘贴或输入地址信息进行自动解析" confirmType="send"></u--textarea>
      <u-button class="address-btn" type="primary" size="small" text="智能识别" @click="parsing"></u-button>
    </view>
    <u-loading-page :loading="loading" loading-text="解析中..."></u-loading-page>
    <view class="edit-reate-address--info">
      <u--form
				labelPosition="left"
				:model="addressInfoFrom"
				:rules="rules"
        labelWidth="92"
				ref="uForm">
        <u-form-item
          label="联系人"
          prop="name"
          borderBottom
          ref="name">
          <u--input
            v-model="addressInfoFrom.name"
            placeholder="请输入联系人"
            style="padding: 6px 8px;"
            border="none"></u--input>
        </u-form-item>
        <u-form-item
          label="手机号"
          prop="phone"
          confirmType="send"
          borderBottom
          ref="phone">
          <u--input
            v-model="addressInfoFrom.phone"
            placeholder="请输入手机号"
            style="padding: 6px 8px;"
            border="none"></u--input>
        </u-form-item>
        <u-form-item
          label="所在地"
          prop="location"
          borderBottom
          ref="location">
          <view class="address-location" @click="openLocation">
            <view :class="{'location-gray':!addressInfoFrom.location}">{{ addressInfoFrom.location ?  addressInfoFrom.location : '请输入所在地'}}</view>
            <u-icon name="arrow-right" color="#999"></u-icon>
          </view>
        </u-form-item>
        <u-form-item
          label="详细地址"
          prop="address"
          borderBottom
          ref="address">
          <u--textarea confirmType="send" v-model="addressInfoFrom.address" border="none" placeholder="请输入详细地址" ></u--textarea>
        </u-form-item>
      </u--form>
    </view>
    <view class="edit-reate-address-btn">
      <button :loading="addressLoading" class="btn-confirm" @click="confirm">添加地址簿</button>
    </view>

    <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirmLocation" @cancel="cancel" :visible="visible"/>
  </view>
</template>

<script>
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
export default {
  components: {
    cityPicker
  },
  data() {
    return {
      visible: false,
      maskCloseAble: true,
      defaultValue: '',
      column: 3,
      addressInfo: '',
      addressInfoFrom: {
        name: '',
        phone: '',
        location:'',
        address: ''
      },
      rules: {
				'addressInfoFrom.name': {
					type: 'string',
					required: true,
					message: '请填写联系人',
					trigger: ['blur', 'change']
				},
				'addressInfoFrom.phone': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择手机号',
					trigger: ['blur', 'change']
				},
			},
      loading: false,
      addressLoading: false,
      currentAddress: '',
      addressAnalysisInfo: {},
      cityPickerInfo:{},
      currentType: '',
    };
  },
  onLoad(options) {
    if(options.currentAddress){
      this.currentAddress = JSON.parse(decodeURIComponent(options.currentAddress))
      console.log(this.currentAddress,'---');
      
      this.addressInfoFrom.name = this.currentAddress.name
      this.addressInfoFrom.phone = this.currentAddress.mobile
      this.addressInfoFrom.location = this.currentAddress.province + this.currentAddress.city + this.currentAddress.area
      this.addressInfoFrom.address = this.currentAddress.address
    }
    if(options.type ){
      this.currentType = options.type
    }
  },
  methods: {
    openLocation(){
      this.defaultValue = this.currentAddress.cid + ''
      this.visible = true
    },
    confirmLocation (val) {
      console.log(val);
      this.cityPickerInfo = val
      this.addressInfoFrom.location = val.name
      this.visible = false
    },
    cancel () {
      this.visible = false
    },
    // 解析地址
    parsing(){
      if(!this.addressInfo){
        this.$uti.alert('请粘贴或输入地址信息');
        return
      }
      this.loading = true
      this.$http.get('courierOrder/addressAnalysis', {
				text: this.addressInfo
			}, res => {
				if (res.code === 'success') {
          this.addressAnalysisInfo = JSON.parse(res.data)
          this.addressInfoFrom.name = this.addressAnalysisInfo.person
          this.addressInfoFrom.phone = this.addressAnalysisInfo.phonenum
          this.addressInfoFrom.location = this.addressAnalysisInfo.province + this.addressAnalysisInfo.city + this.addressAnalysisInfo.county + this.addressAnalysisInfo.town
          this.addressInfoFrom.address = this.addressAnalysisInfo.detail
				} else {
					this.$uti.alert(res.message);
				}
        this.loading = false
			})
    },
    confirm(){
      if(!this.addressInfoFrom.name && !this.addressInfoFrom.phone && !this.addressInfoFrom.location && !this.addressInfoFrom.address){
        this.$uti.alert('请粘贴或输入地址信息');
        return
      }
      let param = {}
      this.addressLoading = true
      param.province = this.cityPickerInfo.provinceName ? this.cityPickerInfo.provinceName: this.addressAnalysisInfo.province
      param.city = this.cityPickerInfo.cityName ? this.cityPickerInfo.cityName: this.addressAnalysisInfo.city
      param.county = this.cityPickerInfo.areaName ? this.cityPickerInfo.areaName: this.addressAnalysisInfo.county
      param.detail = this.addressInfoFrom.address
      param.name = this.addressInfoFrom.name
      param.mobile = this.addressInfoFrom.phone
      this.$http.post('ziaddress/edit', {
				id: this.currentAddress?.id ? this.currentAddress.id : '', //按照captcha-code:xxx的格式传值，xxx可以替换为任意字符串
        province: param.province,
        city: param.city,
        area:  param.county,
        address: param.detail,
        name: param.name,
        mobile: param.mobile
			}, res => {
        if(res.code === 'success'){
          let currentAddress = {
            area: param.county,
            address: param.detail,
            ...param
          }
          if(this.currentType === 'send'){
            uni.setStorageSync('currentAddress',  encodeURIComponent(JSON.stringify(currentAddress)))
          }else if(this.currentType ==='receive'){
            uni.setStorageSync('currentReceiveAddress', encodeURIComponent(JSON.stringify(currentAddress)))
          }
          uni.navigateBack({ delta: 1 })
        }
        this.addressLoading = false
			})
    }
  },
};
</script>

<style lang="scss" scoped>
  .edit-reate-address{
    .address-tips{
      width: 100%;
      display: flex;
      align-items: center;
      background: #fcf0e2;
      color: #a0783d;
      font-size: 28rpx;
      padding: 12rpx 24rpx;
      box-sizing: border-box;
    }
    .edit-reate-address--box{
      width: 100%;
      background-color: #fff;
      padding: 24rpx 24rpx 104rpx 24rpx;
      box-sizing: border-box;
      position: relative;
      margin-bottom: 24rpx;
      .address-btn{
        width: 168rpx;
        position: absolute;
        bottom: 16rpx;
        right: 24rpx;
      }
    }
    .edit-reate-address--info{
      background-color: #fff;
      padding: 24rpx;
      .u-custom-style-input{
        padding: 12rpx 16rpx;
      }
      .address-location{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12rpx 16rpx;
        box-sizing: border-box;
        .location-gray{
          color: #ccc9c9;
        }
      }
    }
    .edit-reate-address-btn{
      position: fixed;
      bottom: 20rpx;
      left: 0;
      width: 100%;
      height: 88rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      .btn-confirm{
        color:#ffffff;
        background-color:#e69b3f;
        border-color:#e69b3f;
        width:100%;
        font-size: 36rpx;
      }
    }
  }
</style>
